<template>
  <div class="goods-sku">
    <!-- <pre>{{goods}}</pre> -->
    <dl v-for="(item) in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="value in item.values">
          <img
            :key="value.name"
            v-if="value.picture"
            :class="{selected: value.isTrue, disabled: value.disabled}"
            :src="value.picture"
            alt=""
            @click="select(value, item)"
          />
          <span v-else :key="value.name"  @click="select(value, item)" :class="{selected: value.isTrue, disabled: value.disabled}">{{ value.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import bwPowerSet from '@/vender/power-set'
// import { message } from '@/components/Message'

// 获取选中的sku
const confirm = (specs) => {
  const arr = []
  specs.forEach((item, i) => {
    const obj = item.values.find(an => an.isTrue)
    if (obj) {
      arr[i] = obj.name
    } else {
      arr[i] = undefined
    }
  })
  return arr
}

// 初始状态的高亮
const initLed = (specs, pathMap) => {
  const skuArr = JSON.stringify(confirm(specs))
  specs.forEach((spec, i) => {
    spec.values.forEach(item => {
      const sku = JSON.parse(skuArr)
      sku[i] = item.name
      const key = sku.filter(item => item).join('☆')
      if (pathMap[key]) {
        item.disabled = false
      } else {
        item.disabled = true
      }
    })
  })
}

// 数据的处理（返回所有可能）
const getArr = (skus) => {
  const pathObj = {}
  skus.forEach(item => {
    if (item.inventory) {
      const arr = item.specs.map(i => i.valueName)
      const arrList = bwPowerSet(arr)
      arrList.forEach((sku) => {
        const key = sku.join('☆')
        if (pathObj[key]) {
          pathObj[key].push(item.id)
        } else {
          pathObj[key] = [item.id]
        }
      })
    }
  })
  return pathObj
}
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      dafeult () {
        return {}
      }
    }
  },
  setup (props, { emit }) {
    const pathMap = getArr(props.goods.skus)
    initLed(props.goods.specs, pathMap)
    // 点击后样式的改变
    const select = (value, specs) => {
      if (value.isTrue) {
        value.isTrue = false
      } else {
        specs.values.forEach(item => (item.isTrue = false))
        value.isTrue = true
      }
      // 显示初始化高亮
      initLed(props.goods.specs, pathMap)
      const key = confirm(props.goods.specs).filter(i => i)
      if (key.length === props.goods.specs.length) {
        const obj = props.goods.skus.find(item => item.id === pathMap[key.join('☆')][0])
        emit('getObjId', { ...obj, specsText: obj.specs.reduce((str, item) => `${str} ${item.name}：${item.valueName}`, '').trim('') })
      }
    }
    return { select }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
